<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>添加新员工</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>

            $(document).ready(function () {

                $("#btn3").click(function () {

                    //如果使用ajax提交一个包含文件的表单
                    //可以不设置form的method和enctype，通过ajax()函数的参数指定即可
                    //需要将表单的数据封装成一个FormData对象，进行提交
                    //需要指定封装的数据来自哪个表单
                    //[0]表示获取的第一个这样的表单，也就是第一个id为add_form的表单
                    var formData=new FormData($("#add_form")[0]);

                    $.ajax({
                        url: 'aes3',
                        type: 'POST',
                        data: formData, //将封装的FormData对象作为数据提交 
                        //对于使用ajax提交的包含文件的表单
                        //以下两个属性设置为false
                        processData: false, 
                        contentType: false,
                        success: function (fileName) {
		            //使用返回的文件的名称显示上传的图片在id为photo的img元素中
                            //attr()函数用于修改选定的元素的属性
                            $("#photo").attr("src","photo/"+fileName);
                            $("#warning").fadeIn(3000).fadeOut(2000);
                        },
                        error: function () {
                            alert("error");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="container text-warning">

            <h1 class="text-center bg-success text-success padding10">添加新员工-上传单张头像</h1>
            <hr>
            <br>

            <!--
                如果表单包含了type="file"这种表单元素，那么表单必须以POST方式提交
                并且enctype设置为multipart/form-data
            -->
            <form class="form-inline" id="add_form" method="post" enctype="multipart/form-data">
                <label for="iempid">员工编号：</label>
                <input id="iempid" type="text" name="empId" placeholder="输入员工编号，如E001" class="form-control sinfo">
                <br><br>
                <label for="iname">员工姓名：</label>
                <input id="iname" type="text" name="empName" placeholder="输入姓名，不超过4个中文字符" class="form-control sinfo">
                <br><br>
                <label for="igender">员工性别：</label>
                <select id="igender" name="empGender" class="form-control select">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <br><br>
                <label for="idob">出生日期：</label>
                <input id="idob" name="empDob" type="date" class="form-control">
                <br><br>
                <span class="title">个人头像： </span>
                <input type="file" id="fileInput" name="file" >
                <br><br><br>
                <button type="submit" formaction="aes1" class="btn btn-success">添加员工1</button>
                &nbsp;&nbsp;
                <button type="submit" formaction="aes2" class="btn btn-danger">添加员工2</button>
                &nbsp;&nbsp;
                <button type="button" id="btn3" class="btn btn-info">添加员工3-ajax</button>
            </form>
            <br>

            <div class="text-center fixed">
                <img id="photo" src="images/lxh01.gif" alt="头像" class="img-thumbnail img-circle">
                <br><br>
                <a href="index.jsp" class="btn btn-sm btn-danger">返回首页</a>
            </div>

            <div class="alert alert-success" id="warning">
                <h4>添加成功，请返回首页查看员工列表！！！</h4>
            </div>

        </div>
    </body>
</html>
